import { defineComponent, PropType } from "vue";
import ECharts from "@/components/ECharts/index.vue";

export default defineComponent({
  name: "LiLineChart",
  props: {
    title: {
      type: String as PropType<string>,
      default: ""
    },
    xArray: {
      type: Array as PropType<any[]>,
      required: true
    },
    yArray: {
      type: Array as PropType<any[]>,
      required: true
    },
    height: {
      type: Number as PropType<number>,
      default: 480
    }
  },
  setup(props) {
    return () => (
      <ECharts
        option={{
          title: { text: props.title, left: "center" },
          tooltip: { trigger: "axis" },
          xAxis: {
            type: "category",
            data: props.xArray,
            axisLabel: {
              show: true
              // interval: 0
            }
          },
          yAxis: { type: "value" },
          series: [
            {
              data: props.yArray,
              type: "line",
              smooth: true
            }
          ]
        }}
        height={props.height}
      />
    );
  }
});
